

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>CSS笔记-3 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="CSS笔记-3">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-09-08 08:16" pubdate>
        2021年9月8日 早上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      7k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      88
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">CSS笔记-3</h1>
            
            <div class="markdown-body">
              <h1 id="前端基础CSS3"><a href="#前端基础CSS3" class="headerlink" title="前端基础CSS3"></a>前端基础CSS3</h1><h2 id="CSS3样式四大点"><a href="#CSS3样式四大点" class="headerlink" title="CSS3样式四大点"></a>CSS3样式四大点</h2><ol>
<li>过渡</li>
<li>交换</li>
<li>渐变</li>
<li>动画</li>
</ol>
<h2 id="布局两大点"><a href="#布局两大点" class="headerlink" title="布局两大点"></a>布局两大点</h2><ol>
<li>弹性盒子布局</li>
<li>响应式布局</li>
</ol>
<h2 id="1-过渡"><a href="#1-过渡" class="headerlink" title="1.过渡"></a>1.过渡</h2><p><code>transition</code></p>
<blockquote>
<p>需要哪个元素执行过渡，就将此属性设置到哪个元素上</p>
</blockquote>
<ol>
<li><code>transition-property</code> 要执行过渡的属性</li>
<li><code>transition-duration</code> 要执行过渡的时间，它以 s秒 或 ms毫秒 为单位 </li>
<li><code>transition-timing-function</code> 过渡执行的时间函数【也叫效果的执行效果】,默认值是 ease </li>
<li><code>transition-delay</code> 过渡的等待时间。默认值是 0s </li>
<li><code>transition</code> 它是过渡的综合属性，结合了上面的4个属性</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*上面四个属性可以合一*/</span><br><span class="hljs-attribute">transition</span>: width <span class="hljs-number">2s</span> linear <span class="hljs-number">2s</span>; <span class="hljs-comment">/*宽度属性 过渡时间 执行线性渐变 等待时间*/</span><br></code></pre></td></tr></table></figure>

<h3 id="1-1设置多属性过渡"><a href="#1-1设置多属性过渡" class="headerlink" title="1.1设置多属性过渡"></a>1.1设置多属性过渡</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 设置多属性时 */</span><br><span class="hljs-attribute">transition</span>: width <span class="hljs-number">2s</span> linear <span class="hljs-number">1s</span>,height <span class="hljs-number">3s</span> linear <span class="hljs-number">2s</span>; <span class="hljs-comment">/*设置宽高 不同的属性渐变*/</span><br></code></pre></td></tr></table></figure>

<h3 id="1-2过渡执行的过渡函数"><a href="#1-2过渡执行的过渡函数" class="headerlink" title="1.2过渡执行的过渡函数"></a>1.2过渡执行的过渡函数</h3><p><code>transition-timing-function</code></p>
<ol>
<li><code>ease</code> 轻松的,这个代表过渡执行的时间是<strong>先快后慢</strong></li>
<li><code>linear</code>匀速的，<strong>使用最频繁</strong></li>
<li><code>ease-in</code>先慢后快</li>
<li><code>ease-out</code>先快后慢</li>
<li><code>ease-in-out</code>慢快慢</li>
</ol>
<p>除了上面几种外，还可以使用<strong>贝塞尔曲线</strong>设置自定义过渡快慢</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">transition-timing-function</span>:<span class="hljs-built_in">cubic-bezier</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0.54</span>, <span class="hljs-number">1</span>, <span class="hljs-number">1</span>);<br></code></pre></td></tr></table></figure>

<h3 id="1-3全属性过渡"><a href="#1-3全属性过渡" class="headerlink" title="1.3全属性过渡"></a>1.3全属性过渡</h3><p>直接设置<code>transition-property:all</code></p>
<h3 id="1-4过渡的非对称性"><a href="#1-4过渡的非对称性" class="headerlink" title="1.4过渡的非对称性"></a>1.4过渡的非对称性</h3><blockquote>
<p>当过渡的状态由状态1到状态2，及状态2到状态1相同的时候，我们就认为这个过渡是对称的，否则就称 之为不对称的过渡</p>
</blockquote>
<p>例子：鼠标悬浮宽度过渡，鼠标移走高度过渡(使用<code>:hover</code>覆盖之前的样式即可)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs html">    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-comment">/* 10 */</span></span><br><span class="css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">            <span class="hljs-comment">/* 鼠标放进去的时候，宽度过渡 */</span></span><br><span class="css">            <span class="hljs-comment">/* 鼠标离开的时候，高度过渡 */</span></span><br><span class="css">            <span class="hljs-attribute">transition-duration</span>: <span class="hljs-number">5s</span>;</span><br><span class="css">            <span class="hljs-attribute">transition-timing-function</span>: linear;</span><br><span class="css">            <span class="hljs-attribute">transition-delay</span>: <span class="hljs-number">5s</span>;</span><br><span class="css">            <span class="hljs-attribute">transition-property</span>: height;</span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-comment">/* 10+10=20 */</span></span><br><span class="css">        <span class="hljs-selector-class">.box</span><span class="hljs-selector-pseudo">:hover</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;</span><br><span class="css">            <span class="hljs-attribute">transition-property</span>: width;</span><br><span class="css">            <span class="hljs-comment">/*transition-duration: 10s;*/</span></span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        我是小盒子<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="1-5-过渡注意事项"><a href="#1-5-过渡注意事项" class="headerlink" title="1.5!!!过渡注意事项"></a>1.5!!!过渡注意事项</h3><h4 id="1-5-1并不是所有属性都可以执行过渡"><a href="#1-5-1并不是所有属性都可以执行过渡" class="headerlink" title="1.5.1并不是所有属性都可以执行过渡"></a>1.5.1并不是所有属性都可以执行过渡</h4><ol>
<li>float </li>
<li>display </li>
<li>visibility </li>
<li>position </li>
<li>z-index </li>
<li>border-style </li>
<li>font-* <strong>除 font-size</strong> </li>
<li>text-*</li>
</ol>
<h4 id="1-5-2兼容问题"><a href="#1-5-2兼容问题" class="headerlink" title="1.5.2兼容问题"></a>1.5.2兼容问题</h4><blockquote>
<p><code>transition</code>是一个标准的 W3C 发布的 CSS3 属性， 在旧版本的浏览器里面，如果要使用这些新的CSS 属性样式，那么就必须根据不同的浏览器添加不同的<strong>前缀</strong></p>
</blockquote>
<ol>
<li>以谷歌为核心的浏览器，需要添加前缀 <code>-webkit</code></li>
<li>经微软为核心的浏览器，需要添加前缀 <code>-ms</code></li>
<li>以火狐为核心的浏览器，需要添加前缀 <code>-moz</code></li>
<li>以欧朋为核心的浏览器，需要添加前缀 <code>-o</code></li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">transition</span>: all <span class="hljs-number">2s</span> linear;<br><span class="hljs-comment">/* 谷歌的前缀 */</span><br>-webkit-<span class="hljs-attribute">transition</span>: all <span class="hljs-number">2s</span> linear;<br><span class="hljs-comment">/* 以微软为核心的前缀 */</span><br>-ms-<span class="hljs-attribute">transition</span>: all <span class="hljs-number">2s</span> linear;<br><span class="hljs-comment">/* 以火狐为核心的浏览器 */</span><br>-moz-<span class="hljs-attribute">transition</span>: all <span class="hljs-number">2s</span> linear;<br><span class="hljs-comment">/* 以欧朋为核心的浏览器 */</span><br>-o-<span class="hljs-attribute">transition</span>: all <span class="hljs-number">2s</span> linear;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>一般情况下，在开发环境的时候，我们必不需要写前缀，只用写标准的 W3C 属性的行了。后期有专门的插件可以<strong>帮助生成</strong></p>
</blockquote>
<h2 id="2-滤镜属性"><a href="#2-滤镜属性" class="headerlink" title="2.滤镜属性"></a>2.滤镜属性</h2><h3 id="2-1高斯模糊"><a href="#2-1高斯模糊" class="headerlink" title="2.1高斯模糊"></a>2.1高斯模糊</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">filter</span>:<span class="hljs-built_in">blur</span>(px);<br></code></pre></td></tr></table></figure>

<h3 id="注意："><a href="#注意：" class="headerlink" title="注意："></a>注意：</h3><blockquote>
<p>filter在使用的时候会默认提高一个z轴层级</p>
</blockquote>
<hr>
<h2 id="3-变换"><a href="#3-变换" class="headerlink" title="3.变换"></a>3.变换</h2><p>CSS3的属性，变换主要是指元素在位置，大小，角度上面发生了变化，它是CSS3里面的一个属性，属性名为<code>transform</code></p>
<p><strong>设置变换起点：</strong><code>transform-origin:</code></p>
<ol>
<li>X轴变换，可以设置<code>top,center,bottom</code></li>
<li>Y轴变换，可以设置<code>left,center,right</code></li>
<li>它还可以同时设置x轴与y轴的位置，如<code>transform-origin:left top</code></li>
</ol>
<h3 id="3-1位移"><a href="#3-1位移" class="headerlink" title="3.1位移"></a>3.1位移</h3><p><code>translate</code></p>
<blockquote>
<p>位移指元素按原来的位置在x轴，y轴或z轴发生位置移动</p>
</blockquote>
<p><strong>属性：</strong></p>
<ol>
<li><code>translateX</code>：沿着X轴移动</li>
<li><code>translateY</code>：沿着Y轴移动</li>
<li><code>translateZ</code>：沿着Z轴移动(<strong>需要开启3D变换</strong>)</li>
<li><code>translate(X,Y)</code>：如果只有一个值则为x轴移动，如果有两个值，则x轴y轴都移动。</li>
<li><code>translate3d(X,Y,Z)</code>:三个值必须填满，X轴，Y轴，Z轴。</li>
</ol>
<p><strong>特点：</strong></p>
<ol>
<li>相对于自己原来的位置在移动</li>
<li>位移不占用新的位置，同时保留原来的位置</li>
<li>位移是可以遮盖普通的文档流的元素的</li>
<li>位移实现的是“左负右正，上负下正”的原则</li>
<li>位移的时候如果设置百分比，则是以<strong>自己的宽度和高度</strong>为百分比。</li>
</ol>
<blockquote>
<p>位移的3、4这两个点与之前所学习的相对定位一样的</p>
</blockquote>
<h3 id="3-2缩放"><a href="#3-2缩放" class="headerlink" title="3.2缩放"></a>3.2缩放</h3><blockquote>
<p>缩放指元素的大小发生变化</p>
<p>1正常、&lt;1缩小、&gt;1放大</p>
</blockquote>
<ol>
<li><code>scaleX()</code>沿着x轴在缩放</li>
<li><code>scaleY()</code>沿着y轴在缩放</li>
<li><code>scaleZ()</code>沿着z轴在缩放(需要开启3d变换)</li>
<li><code>scale(x,y)</code>可以放两个值，x轴和y轴，如果只有一个值则为x轴</li>
<li><code>scale3d(x,y,z)</code>可以放三个值3d变换</li>
</ol>
<h3 id="3-3旋转"><a href="#3-3旋转" class="headerlink" title="3.3旋转"></a>3.3旋转</h3><p>旋转指元素按照指定的角度在发生变化</p>
<ol>
<li><code>rotateX</code>沿着X轴进行旋转</li>
<li><code>rotateY</code>沿着Y轴进行旋转</li>
<li><code>rotateZ</code>沿着Z轴进行旋转</li>
<li><code>rotate</code> 沿着Z轴发生旋转（不能放两个值）</li>
<li><code>rotate3d</code></li>
</ol>
<p><strong>旋转正负值问题</strong></p>
<ol>
<li>右手拍在屏幕上面，握进去的方向是正数(X轴)</li>
<li>看着自己的右手手掌，握进去的方向是正数(Y轴)</li>
<li>Z轴顺时针为正，逆时针为负</li>
</ol>
<p><strong>单位</strong></p>
<ul>
<li>deg：度数</li>
<li>turn：圈数</li>
</ul>
<h3 id="3-4变换"><a href="#3-4变换" class="headerlink" title="3.4变换"></a>3.4变换</h3><blockquote>
<p>这个用得少</p>
</blockquote>
<ol>
<li><code>skewX(0deg)</code>沿着X轴变形</li>
<li><code>skewY(0deg)</code>沿着Y轴变形</li>
</ol>
<h3 id="3-5-多属性变换"><a href="#3-5-多属性变换" class="headerlink" title="3.5!!!多属性变换"></a>3.5!!!多属性变换</h3><p><code>transform</code>中可以放多个变换属性，实现多属性变换</p>
<blockquote>
<p>注意：在旋转时会导致轴方向的改变</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html">    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="css"></span><br><span class="css">        &#125;</span><br><span class="css">        <span class="hljs-selector-class">.box1</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(<span class="hljs-number">200px</span>) <span class="hljs-built_in">rotateZ</span>(<span class="hljs-number">90deg</span>);</span><br><span class="css">        &#125;</span><br><span class="css"></span><br><span class="css">        <span class="hljs-selector-class">.box2</span> &#123;</span><br><span class="css">            <span class="hljs-attribute">background-color</span>: lightseagreen;</span><br><span class="css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotateZ</span>(<span class="hljs-number">90deg</span>) <span class="hljs-built_in">translateX</span>(<span class="hljs-number">200px</span>);</span><br><span class="css">        &#125;</span><br><span class="css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box1 box&quot;</span>&gt;</span>第一个盒子<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box2 box&quot;</span>&gt;</span>第二个盒子<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/60f950175132923bf83cacd1.jpg" srcset="/blog/img/loading.gif" lazyload alt="变换的注意点"></p>
<blockquote>
<p>第二个盒子先旋转90度 X轴向下，所以再沿着x轴平移就会向下跑</p>
</blockquote>
<h3 id="3-5-3D变换"><a href="#3-5-3D变换" class="headerlink" title="3.5 3D变换"></a>3.5 3D变换</h3><blockquote>
<p>有两种情况的3D，第一种是由视距产生的3D，这一种3D是一种假的3D，第二种则是自身形成了Z轴以后的真的3D</p>
</blockquote>
<p><strong>如果要实现3D的变换必须要满足上面的2个条件之1</strong>，默认情况之下，CSS当中的3D变换是没有开启动</p>
<ol>
<li><p>添加3D视距</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">perspective</span>:<span class="hljs-number">750px</span>;<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">添加视距前</th>
<th align="center">添加视距后</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/60fa75f85132923bf86166ed.jpg" srcset="/blog/img/loading.gif" lazyload alt="前"></td>
<td align="center"><img src="https://pic.imgdb.cn/item/60fa761f5132923bf861dcae.jpg" srcset="/blog/img/loading.gif" lazyload alt="后"></td>
</tr>
</tbody></table>
<p><strong>perspective注意事项：</strong></p>
<ul>
<li>它必须设置在变换元素的外层元素上面</li>
<li><strong>它的值越小，透视的效果就越明显</strong>；如果元素是<strong>沿着X轴在变换</strong>的，我们就以<strong>宽度</strong>为参考值，如果元素是以<strong>Y轴变换的</strong>，我们就以<strong>高度</strong>为参考</li>
</ul>
<blockquote>
<p>像这种通过视距去形成的透视3D，我们就都叫假的3D</p>
</blockquote>
</li>
<li><p>通过拉开元素的Z轴让它形成一个3D空间</p>
</li>
</ol>
<p>这需要开启3D变换效果:<code>transform-style</code></p>
<p><code>transform-style</code>有2个属性值</p>
<ul>
<li><code>flat</code>平面，说明当前元素是平面空间</li>
<li><code>preserve-3d</code>维持成3d，说明当前元素要维持成一个3d空间，这个内部元素的就可以在Z轴上面活动</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">transform-style</span>:preserve-<span class="hljs-number">3</span>d;<br></code></pre></td></tr></table></figure>



<table>
<thead>
<tr>
<th align="center">开启前</th>
<th align="center">开启后</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/60fa77895132923bf8668d5d.jpg" srcset="/blog/img/loading.gif" lazyload alt="前"></td>
<td align="center"><img src="https://pic.imgdb.cn/item/60fa77635132923bf86611d0.jpg" srcset="/blog/img/loading.gif" lazyload alt="后"></td>
</tr>
</tbody></table>
<h4 id="3D变换用到的属性"><a href="#3D变换用到的属性" class="headerlink" title="3D变换用到的属性"></a>3D变换用到的属性</h4><ol>
<li><p><code>transform-origin</code>设置变换的起点(轴的位置)</p>
</li>
<li><p><code>transform-style</code>设置变换的空间</p>
<ul>
<li><code>flat</code>平面空间</li>
<li><code>preserve-3d</code>维持在3D空间</li>
</ul>
</li>
<li><p><code>backface-visibility</code>，当元素经过变换以后，如果背对着用户，是否可见</p>
<ul>
<li><code>visible</code>可见【默认值】</li>
<li><code>hidden</code>不可见</li>
</ul>
</li>
<li><p><code>perspective:100px;</code>视距，视线与物体的距离</p>
</li>
<li><p><code>perspective-origin:left;</code>视点，从哪个位置看</p>
<hr>
</li>
</ol>
<h2 id="4-动画"><a href="#4-动画" class="headerlink" title="4.动画"></a>4.动画</h2><blockquote>
<p>动画与之前所学习的过渡非常像，但是跟过渡相比较，也有几点不同</p>
</blockquote>
<ol>
<li>过渡只能实现一个状态到另一个状态的变化，它不能实现多个状态的变化</li>
<li>过渡状态的切换目前阶段只能手动的触发</li>
<li>过渡每次的触发只能执行一次</li>
</ol>
<p>为了弥补上面的缺点，CSS里面推出了动画</p>
<blockquote>
<p>CSS动画的退出第一个目的是为了弥补之前过渡的缺点，第二个目的就是为了替代以前的flash这个技术</p>
</blockquote>
<p>CSS的动画是CSS3当中的一种技术，动画主要分为两种类型的动画</p>
<ol>
<li>流畅型的动画</li>
<li>帧动画</li>
</ol>
<h3 id="4-1定义动画"><a href="#4-1定义动画" class="headerlink" title="4.1定义动画"></a>4.1定义动画</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@keyframes</span> aaa&#123;<br>	<span class="hljs-selector-tag">from</span>&#123;<br>		<span class="hljs-comment">/*动画开始*/</span><br>	&#125;<br>	<span class="hljs-selector-tag">to</span>&#123;<br>		<span class="hljs-comment">/*动画结束*/</span><br>	&#125;<br>&#125;<br><br><span class="hljs-keyword">@keyframes</span> bbb&#123;<br>	<span class="hljs-number">0%</span>&#123;<br>		<span class="hljs-comment">/*动画开始*/</span><br>	&#125;<br>    <span class="hljs-number">50%</span>&#123;<br>        <span class="hljs-comment">/*执行一半*/</span><br>    &#125;<br>	<span class="hljs-number">100%</span>&#123;<br>		<span class="hljs-comment">/*动画结束*/</span><br>	&#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<ol>
<li>使用百分比与使用<code>from/to</code>的方式都可以</li>
<li>百分比的方式会更加灵活的一点，它可以在任意阶段去停留</li>
<li><code>from/to</code>可以与百分比这种情况<strong>混合使用</strong>，如开始的时候使用的0%结束的时候我可以使用to</li>
</ol>
</blockquote>
<h3 id="4-2使用动画"><a href="#4-2使用动画" class="headerlink" title="4.2使用动画"></a>4.2使用动画</h3><ol>
<li><code>animation-name:</code>代表动画的名称</li>
<li><code>animation-duration:</code>代表动画持续时间</li>
<li><code>animation-timing-function:</code>代表过渡函数 【默认值为ease】</li>
<li><code>animation-delay:</code>动画延迟(可以设置负值，正值代表延后，负值代表提前)</li>
<li><code>animation-iteration-count:</code>10000(一直执行：<code>infinite</code>)</li>
<li><code>animation-direction</code>设置动画执行的方向<ul>
<li><code>normal</code>动画正常的从开始from到结束to【默认值】</li>
<li><code>reverse</code>：动画反转执行，也就是从<code>to</code>结束到<code>from</code>开始</li>
<li><code>alternate</code>：动画正反交替运行</li>
<li><code>alternate-reverse</code>：动画反正交替运行</li>
</ul>
</li>
<li><code>animation-play-state</code>设置动画的播放状态<ul>
<li><code>running</code>：动画在运行状态【默认值】</li>
<li><code>paused</code>：动画处于暂停状态</li>
</ul>
</li>
<li><code>animation-fill-mode</code>：设置动画在最后的停止状态<ul>
<li><code>backwards</code>：返回开始<code>from</code>状态【默认值】</li>
<li><code>forwards</code>：动画停止在结束<code>to</code>状态</li>
</ul>
</li>
</ol>
<p><strong>8个属性合一</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">animation</span>:动画名称 动画持续时间 [时间函数] [等待时间] [播放次数] [动画方向] [播放状态] [结束状态];<br></code></pre></td></tr></table></figure>

<blockquote>
<p>代码规范：</p>
<ol>
<li>动画的名称与动画持续时间不能(最好不要交换 可以交换)交换位置</li>
<li>后面有中括号的可以换位置，也可以省略</li>
</ol>
</blockquote>
<h3 id="4-3一个元素使用多个动画"><a href="#4-3一个元素使用多个动画" class="headerlink" title="4.3一个元素使用多个动画"></a>4.3一个元素使用多个动画</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;<br>    <span class="hljs-attribute">background-color</span>: deeppink;<br>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">32px</span>;<br>    <span class="hljs-comment">/*多个动画的名称使用逗号来进行隔开*/</span><br>    <span class="hljs-attribute">animation-name</span>: aaa, bbb;<br>    <span class="hljs-attribute">animation-duration</span>: <span class="hljs-number">5s</span>, <span class="hljs-number">3s</span>;<br>    <span class="hljs-attribute">animation-timing-function</span>: linear, ease;<br>    <span class="hljs-attribute">animation-delay</span>: <span class="hljs-number">0s</span>,<span class="hljs-number">2s</span>;<br>&#125;<br><br><span class="hljs-keyword">@keyframes</span> aaa &#123;<br>    <span class="hljs-selector-tag">from</span> &#123;<br>        <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br><br>    <span class="hljs-selector-tag">to</span> &#123;<br>        <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">400px</span>;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">@keyframes</span> bbb &#123;<br>    <span class="hljs-selector-tag">from</span> &#123;<br>        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br><br>    <span class="hljs-selector-tag">to</span> &#123;<br>        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>使用<code>animation</code>一个属性时</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">animation</span>: aaa <span class="hljs-number">5s</span> linear <span class="hljs-number">0s</span>,bbb <span class="hljs-number">3s</span> ease <span class="hljs-number">2s</span>;<br></code></pre></td></tr></table></figure>

<h3 id="4-4动画的兼容性"><a href="#4-4动画的兼容性" class="headerlink" title="4.4动画的兼容性"></a>4.4动画的兼容性</h3><blockquote>
<p>动画是CSS3中的新特性，在低版本的浏览器里面，仍然需要去处理。需要根据不同的浏览器去添加不同的前缀</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/60fea5dd5132923bf83f0452.png" srcset="/blog/img/loading.gif" lazyload alt="兼容"></p>
<h3 id="4-5动画视觉差"><a href="#4-5动画视觉差" class="headerlink" title="4.5动画视觉差"></a>4.5动画视觉差</h3><blockquote>
<p>动画的视觉差叫动画的欺骗</p>
</blockquote>
<p>在某些特殊的场景（当一个动画结束的时候与开始的时候能够大致形成重叠）下面，我们可以借用于一切特殊的素材来实现这个效果</p>
<img src="https://pic.imgdb.cn/item/60fea6d35132923bf8421ac6.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210726140101330" style="zoom:33%;" />

<p>上面一张图片就是典型的形成动画视觉差的图片，这个图片的顶部与尾部是可以相互连在一起的。可以选环播放达到动画效果</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;!DOCTYPE <span class="hljs-selector-tag">html</span>&gt;<br>&lt;<span class="hljs-selector-tag">html</span>&gt;<br>	&lt;head&gt;<br>		&lt;meta charset=&quot;utf-<span class="hljs-number">8</span>&quot;&gt;<br>		&lt;title&gt;动画的视觉差&lt;/title&gt;<br>		&lt;style type=&quot;text/css&quot;&gt;<br>			<span class="hljs-selector-class">.outer-box</span> &#123;<br>				<span class="hljs-attribute">width</span>: <span class="hljs-number">512px</span>;<br>				<span class="hljs-attribute">height</span>: <span class="hljs-number">768px</span>;<br>				<span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid red;<br>				<span class="hljs-attribute">position</span>: relative;<br>				<span class="hljs-attribute">overflow</span>: hidden;<br>			&#125;<br><br>			<span class="hljs-selector-class">.box</span> &#123;<br>				<span class="hljs-attribute">width</span>: <span class="hljs-number">512px</span>;<br>				<span class="hljs-comment">/* 2个背景图的高度,让背景图默认重复平铺	*/</span><br>				<span class="hljs-attribute">height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">768px</span> * <span class="hljs-number">2</span>);<br>				<span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">https://pic.imgdb.cn/item/60fea6d35132923bf8421ac6.png&quot; alt=&quot;image-20210726140101330</span>);<br>				<span class="hljs-attribute">position</span>: absolute;<br>				<span class="hljs-attribute">top</span>: -<span class="hljs-number">768px</span>;<br>				<span class="hljs-attribute">animation</span>: box-ani <span class="hljs-number">5s</span> linear infinite;<br>			&#125;<br>			<span class="hljs-keyword">@keyframes</span> box-ani&#123;<br>				<span class="hljs-selector-tag">from</span>&#123;<br>                    <span class="hljs-comment">/*这里-768px与0px所表现的效果是一样的*/</span><br>					<span class="hljs-attribute">top</span>: -<span class="hljs-number">768px</span>;<br>				&#125;<br>				<span class="hljs-selector-tag">to</span>&#123;<br>					<span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;<br>				&#125;<br>			&#125;<br>		&lt;/style&gt;<br>	&lt;/head&gt;<br>	&lt;<span class="hljs-selector-tag">body</span>&gt;<br>		&lt;<span class="hljs-selector-tag">div</span> class=&quot;outer-box&quot;&gt;<br>			&lt;<span class="hljs-selector-tag">div</span> class=&quot;box&quot;&gt;<br>			&lt;/<span class="hljs-selector-tag">div</span>&gt;<br>		&lt;/<span class="hljs-selector-tag">div</span>&gt;<br>	&lt;/<span class="hljs-selector-tag">body</span>&gt;<br>&lt;/<span class="hljs-selector-tag">html</span>&gt;<br></code></pre></td></tr></table></figure>

<p>视觉差形成的小技巧：</p>
<blockquote>
<ol>
<li>外边的盒子必须要小于里面的盒子，然后通过<code>overflow:hidden</code>去隐藏多余的部分</li>
<li>小盒子移出去的部分必须与后面填被部分是相同（或可以形成互补关系）</li>
<li>如果是通过图片素材来实现的视觉差 ，则这个图片的开始与结束必须会形成联系</li>
</ol>
</blockquote>
<h3 id="4-6阶段性动画"><a href="#4-6阶段性动画" class="headerlink" title="4.6阶段性动画"></a>4.6阶段性动画</h3><blockquote>
<p>动画分为2个部分，第一个是动画的定义，第二个是动画的使用，阶段性动画指动画在定义的过程当中执行了一个阶段</p>
</blockquote>
<p>现有如下动画效果</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>动画的阶段性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span><br><span class="css">			<span class="hljs-selector-class">.box</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;</span><br><span class="css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">400px</span>;</span><br><span class="css">				<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">				<span class="hljs-attribute">position</span>:relative;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-selector-class">.small-box</span>&#123;</span><br><span class="css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="css">				<span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="css">				<span class="hljs-attribute">position</span>: absolute;</span><br><span class="css">				<span class="hljs-attribute">animation</span>: small-box-ani <span class="hljs-number">10s</span> linear infinite;</span><br><span class="css">			&#125;</span><br><span class="css">			<span class="hljs-keyword">@keyframes</span> small-box-ani&#123;</span><br><span class="css">				<span class="hljs-number">0%</span>&#123;</span><br><span class="css">					<span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">					<span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">				&#125;</span><br><span class="css">				<span class="hljs-number">25%</span>&#123;</span><br><span class="css">					<span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;</span><br><span class="css">					<span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">				&#125;</span><br><span class="css">				<span class="hljs-number">50%</span>&#123;</span><br><span class="css">					<span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;</span><br><span class="css">					<span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;</span><br><span class="css">				&#125;</span><br><span class="css">				<span class="hljs-number">75%</span>&#123;</span><br><span class="css">					<span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">					<span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;</span><br><span class="css">				&#125;</span><br><span class="css">				<span class="hljs-number">100%</span>&#123;</span><br><span class="css">					<span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">					<span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;</span><br><span class="css">				&#125;</span><br><span class="css">			&#125;</span><br><span class="css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>			<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small-box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>		<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/60ffce845132923bf8a805cc.gif" srcset="/blog/img/loading.gif" lazyload style="zoom: 25%;" />

<p>上面的动画是一个流畅型的动画 ，我们现在把这个动画的效果更改一下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@keyframes</span> small-box-ani&#123;<br>    <span class="hljs-number">0%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br>    <span class="hljs-number">25%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br>    <span class="hljs-number">25.1%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br>    <span class="hljs-number">50%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br>    <span class="hljs-number">50.1%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;<br>    &#125;<br>    <span class="hljs-number">75%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;<br>    &#125;<br>    <span class="hljs-number">75.1%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;<br>    &#125;<br>    <span class="hljs-number">100%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>这个时候的动画就会变成下面的效果（闪现）</p>
<img src="https://pic.imgdb.cn/item/60ffcf465132923bf8aa4d58.gif" srcset="/blog/img/loading.gif" lazyload style="zoom:25%;" />

<p>这个时候动画的定义就可以理解为下面的这种线段</p>
<p><img src="https://pic.imgdb.cn/item/60ffcfe15132923bf8ac068b.png" srcset="/blog/img/loading.gif" lazyload alt="线段"></p>
<p>我们把整个动画运行的时间划分成了4个阶段</p>
<ol>
<li>0%~25%是第一阶段</li>
<li>25.1%~50%是第二阶段</li>
<li>50.1%~75%是第三阶段</li>
<li>75.1%~100是第四阶段</li>
</ol>
<blockquote>
<p>每个阶段的起始位置与结束位置都是相同的，在阶段与阶段切换的过程当中，我们的时间会非常短，切换速度就会变得非常快，而在同一个时间段之内，它的位置又没有发生变化。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@keyframes</span> small-box-ani&#123;<br>    <span class="hljs-comment">/*第一阶段*/</span><br>    <span class="hljs-number">0%</span>,<span class="hljs-number">25%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br>    <span class="hljs-comment">/*第二阶段*/</span><br>    <span class="hljs-number">25.1%</span>,<span class="hljs-number">50%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;<br>    &#125;<br>    <span class="hljs-comment">/*第三阶段*/</span><br>    <span class="hljs-number">50.1%</span>,<span class="hljs-number">75%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;<br>    &#125;<br>    <span class="hljs-comment">/*第四阶段*/</span><br>    <span class="hljs-number">75.1%</span>,<span class="hljs-number">100%</span>&#123;<br>        <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;<br>        <span class="hljs-attribute">top</span>: <span class="hljs-number">300px</span>;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="4-7帧动画"><a href="#4-7帧动画" class="headerlink" title="4.7帧动画"></a>4.7帧动画</h3><blockquote>
<p>帧动画是一种特殊的阶段型动画</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/60ffd0b65132923bf8aebc2d.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210727142403713"></p>
<p>上面是一个精灵图，我们可以通过这个精灵图结合我们的阶段性动画来实现孙悟空行走的效果</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;utf-8&quot;</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>阶段型动画<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span><br><span class="css">			<span class="hljs-selector-class">.monkey-sun</span> &#123;</span><br><span class="css">				<span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="css">				<span class="hljs-attribute">height</span>: <span class="hljs-number">180px</span>;</span><br><span class="css">				<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;</span><br><span class="css">				<span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">./img/1.png</span>);</span><br><span class="css">				<span class="hljs-attribute">background-position</span>-x: <span class="hljs-number">0px</span>;</span><br><span class="css">				<span class="hljs-attribute">animation</span>: aaa <span class="hljs-number">0.8s</span> linear infinite;</span><br><span class="css">			&#125;</span><br><span class="css"></span><br><span class="css">			<span class="hljs-comment">/* 定义阶段型的动画 */</span></span><br><span class="css">			<span class="hljs-keyword">@keyframes</span> aaa &#123;</span><br><span class="css">				<span class="hljs-number">0%</span>,</span><br><span class="css">				<span class="hljs-number">12.5%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: <span class="hljs-number">0px</span>;</span><br><span class="css">				&#125;</span><br><span class="css"></span><br><span class="css">				<span class="hljs-number">12.6%</span>,</span><br><span class="css">				<span class="hljs-number">25%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">200px</span>;</span><br><span class="css">				&#125;</span><br><span class="css"></span><br><span class="css">				<span class="hljs-number">25.1%</span>,</span><br><span class="css">				<span class="hljs-number">37.5%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">400px</span>;</span><br><span class="css">				&#125;</span><br><span class="css"></span><br><span class="css">				<span class="hljs-number">37.6%</span>,</span><br><span class="css">				<span class="hljs-number">50%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">600px</span>;</span><br><span class="css">				&#125;</span><br><span class="css"></span><br><span class="css">				<span class="hljs-number">50.1%</span>,</span><br><span class="css">				<span class="hljs-number">62.5%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">800px</span>;</span><br><span class="css">				&#125;</span><br><span class="css"></span><br><span class="css">				<span class="hljs-number">62.6%</span>,</span><br><span class="css">				<span class="hljs-number">75%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">1000px</span>;</span><br><span class="css">				&#125;</span><br><span class="css"></span><br><span class="css">				<span class="hljs-number">75.1%</span>,</span><br><span class="css">				<span class="hljs-number">87.5%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">1200px</span>;</span><br><span class="css">				&#125;</span><br><span class="css"></span><br><span class="css">				<span class="hljs-number">87.6%</span>,</span><br><span class="css">				<span class="hljs-number">100%</span> &#123;</span><br><span class="css">					<span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">1400px</span>;</span><br><span class="css">				&#125;</span><br><span class="css">			&#125;</span><br><span class="css">		</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>		<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;monkey-sun&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>	<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<p><strong>最终实现的效果图如下</strong></p>
<img src="https://pic.imgdb.cn/item/60ffd0f85132923bf8af86f9.gif" srcset="/blog/img/loading.gif" lazyload style="zoom: 50%;" />

<p>上面的写法是通用的阶段性动画的写法，我们可以使用一些特殊的方式去完成，这一种特殊的方式，我们叫帧动画</p>
<blockquote>
<p>帧动画 ：帧就是关键帧的意思，像老式电影的胶片一样，一张一张的播放【或叫一个阶段一个阶段的播放】</p>
</blockquote>
<p>上面的代码我们完全可以把它拆为8帧去播放</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.monkey-sun</span> &#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">180px</span>;<br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">./img/1.png</span>);<br>    <span class="hljs-attribute">background-position</span>-x: <span class="hljs-number">0px</span>;<br>    <span class="hljs-comment">/* 将动画分为8个步骤（8帧）运行 */</span><br>    <span class="hljs-attribute">animation</span>: bbb <span class="hljs-number">0.8s</span> <span class="hljs-built_in">steps</span>(<span class="hljs-number">8</span>) infinite;<br>&#125;<br><span class="hljs-comment">/* 动画已经定义好了 */</span><br><span class="hljs-keyword">@keyframes</span> bbb&#123;<br>    <span class="hljs-number">0%</span>&#123;<br>        <span class="hljs-attribute">background-position</span>-x: <span class="hljs-number">0px</span> ;<br>    &#125;<br>    <span class="hljs-number">100%</span>&#123;<br>        <span class="hljs-attribute">background-position</span>-x: -<span class="hljs-number">1600px</span>;<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>steps()属于 animation-timing-function</p>
</blockquote>
<p><strong>最终效果和上面阶段性动画相同</strong></p>
<hr>
<h2 id="5-渐变"><a href="#5-渐变" class="headerlink" title="5.渐变"></a>5.渐变</h2><blockquote>
<ol>
<li>渐变是CSS3中的新的特性，它虽然是一个背景颜色的渐变，但是非常特殊，它使用<code>background-image</code>去接收这个属性值</li>
<li>渐变虽然是颜色的变化，但是本质上面是图片。</li>
</ol>
</blockquote>
<pre><code class=" mermaid">graph TD
A[渐变]--&gt;B[线性渐变]
A--&gt;C[径向渐变]
A--&gt;D[圆锥渐变]
</code></pre>



<h3 id="5-1线性渐变"><a href="#5-1线性渐变" class="headerlink" title="5.1线性渐变"></a>5.1线性渐变</h3><p>线性渐变指颜色沿着<strong>某一个角度</strong>或<strong>方向</strong>发生变化，主要有基本的线性渐变与重复的线性渐变</p>
<h4 id="5-1-1基本线性渐变"><a href="#5-1-1基本线性渐变" class="headerlink" title="5.1.1基本线性渐变"></a>5.1.1基本线性渐变</h4><p>使用属性值<code>linear-gradient()</code>来完成，它的语法格式如下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*W3C标准写法*/</span><br><span class="hljs-selector-class">.box</span>&#123;<br>	<span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">linear-gradient</span>(to 方向/角度,颜色值<span class="hljs-number">1</span>[开始位置][结束位置],颜色值<span class="hljs-number">2</span>[开始位置][结束位置]...)<br>&#125;<br><br><span class="hljs-comment">/*兼容性写法*/</span><br><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">linear-gradient</span>(方向/角度,颜色值<span class="hljs-number">1</span> [开始位置] [结束位置],颜色值<span class="hljs-number">2</span> [开始位置] [结束位置]...);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>eg:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*W3C标准写法*/</span><br><span class="hljs-selector-class">.box1</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(to right, red, blue);<br>&#125;<br><span class="hljs-comment">/*兼容写法*/</span><br><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">-webkit-linear-gradient</span>(right, red, blue);<br>&#125;<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">标准写法</th>
<th align="center">兼容性写法</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/61014acb5132923bf85776ad.png" srcset="/blog/img/loading.gif" lazyload style="zoom:50%;" /></td>
<td align="center"><img src="https://pic.imgdb.cn/item/61014abe5132923bf857504d.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210728095045015" style="zoom:50%;" /></td>
</tr>
</tbody></table>
<blockquote>
<p>在上图当中，我们看到这个颜色由红色向蓝色在慢慢的从左向右发生变化。但是也请注意，标准写法与兼容性写法是不一样的</p>
<ol>
<li>兼容性写法少了一个<code>to</code></li>
<li>兼容性写法的颜色与标准写法是相反的</li>
</ol>
</blockquote>
<h4 id="5-1-2关于渐变的位置"><a href="#5-1-2关于渐变的位置" class="headerlink" title="5.1.2关于渐变的位置"></a>5.1.2关于渐变的位置</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*red 0-50 50-100为 红蓝渐变*/</span><br><span class="hljs-selector-class">.box1</span>&#123;<br>    <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">linear-gradient</span>(to right, red <span class="hljs-number">0%</span> <span class="hljs-number">50%</span>, blue);<br>&#125;<br><br><span class="hljs-comment">/*red 0-80 80-100为红蓝渐变*/</span><br><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">linear-gradient</span>(to right, red <span class="hljs-number">0%</span> <span class="hljs-number">80%</span>, blue);<br>&#125;<br><span class="hljs-comment">/*0-30为红色 30-100为蓝色 没有渐变效果*/</span><br><span class="hljs-selector-class">.box3</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(to right, red <span class="hljs-number">0%</span> <span class="hljs-number">30%</span>, blue <span class="hljs-number">30%</span> <span class="hljs-number">100%</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p>0%和100%可以省略不写</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">linear-gradient</span>(to right,red <span class="hljs-number">10%</span>,blue <span class="hljs-number">30%</span>)<br>/*最终呈现为 <span class="hljs-number">0</span>-<span class="hljs-number">10</span>为红色 <span class="hljs-number">10</span>-<span class="hljs-number">30</span>为红蓝渐变 <span class="hljs-number">30</span>-<span class="hljs-number">100</span>为蓝色*/<br></code></pre></td></tr></table></figure>

<h4 id="5-1-3关于渐变的方向"><a href="#5-1-3关于渐变的方向" class="headerlink" title="5.1.3关于渐变的方向"></a>5.1.3关于渐变的方向</h4><ol>
<li>可以通过枚举值设置渐变方向<ul>
<li><code>to right</code>  向右</li>
<li><code>to left</code>  向左</li>
<li><code>to top</code>  下到上</li>
<li><code>to bottom</code> 上到下</li>
<li><code>to right top</code> 到右上</li>
<li><code>to right bottom</code>到右下</li>
<li><code>to left top</code>到左上</li>
<li><code>to left bottom</code>到左下</li>
</ul>
</li>
<li>可以直接设置度数</li>
</ol>
<p>eg:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box1</span> &#123;    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">0deg</span>, red, blue);&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>0度指就是0点钟的方向，依次往后推就可以了。同时它还可以设置负的度数，<strong>正的度数是顺时针旋转</strong></p>
</blockquote>
<h4 id="5-1-4重复线性渐变"><a href="#5-1-4重复线性渐变" class="headerlink" title="5.1.4重复线性渐变"></a>5.1.4重复线性渐变</h4><blockquote>
<p>在普通线性渐变中，如果后面无法填满背景，则会自动使用相同的颜色填充完剩下的区域；而在重复线性渐变里面，可以自动重复平铺。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box1</span>&#123;<br>    <span class="hljs-comment">/* background-image: linear-gradient(to right,red 0% 10%,blue 20% 30%,blue 30% 100%); */</span><br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">linear-gradient</span>(to right,red <span class="hljs-number">0%</span> <span class="hljs-number">10%</span>,blue <span class="hljs-number">20%</span> <span class="hljs-number">30%</span>);<br>    <span class="hljs-comment">/* 在基本的线性渐变里面，如果渐变不能填满，我会自动的帮你补充进行 */</span><br>&#125;<br><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">repeating-linear-gradient</span>(to right,red <span class="hljs-number">0%</span> <span class="hljs-number">10%</span>,blue <span class="hljs-number">20%</span> <span class="hljs-number">30%</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">box1基本线性渐变</th>
<th align="center">box2重复线性渐变</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/61014a925132923bf856c7a4.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210728110954613" style="zoom:50%;" /></td>
<td align="center"><img src="https://pic.imgdb.cn/item/61014aa05132923bf856f41f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210728111002368" style="zoom:50%;" /></td>
</tr>
</tbody></table>
<h3 id="5-2径向渐变"><a href="#5-2径向渐变" class="headerlink" title="5.2径向渐变"></a>5.2径向渐变</h3><blockquote>
<p>径向渐变与线性渐变是不一样的，线性渐变是沿着某一个角度或方向发生变化的，而径向渐变是根据圆的半径来渐变的</p>
</blockquote>
<h4 id="5-2-1基本径向渐变"><a href="#5-2-1基本径向渐变" class="headerlink" title="5.2.1基本径向渐变"></a>5.2.1基本径向渐变</h4><blockquote>
<p>.box{<br> background-image:radial-gradient([渐变形状],颜色1 [起始位置] [结束位置],颜色2 [起始位置] [结束位置]…);<br>}</p>
</blockquote>
<p>eg：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(red, blue);<br></code></pre></td></tr></table></figure>

<p><strong>同时，径向渐变也可以设置起点位置与结束位置 ，用法与线性渐变相同</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*0-30红色小圆 30-50蓝色圆环 剩下的为深粉*/</span><br><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(red <span class="hljs-number">0%</span> <span class="hljs-number">30%</span>,blue <span class="hljs-number">30%</span> <span class="hljs-number">50%</span>,deeppink <span class="hljs-number">50%</span> <span class="hljs-number">100%</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>径向渐变可以设置形状–圆和椭圆</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid black;<br>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">32px</span>;<br>&#125;<br><br><span class="hljs-selector-class">.box1</span> &#123;<br>    <span class="hljs-comment">/*设置渐变形状为椭圆*/</span><br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(ellipse,red, blue);<br>&#125;<br><span class="hljs-selector-class">.box2</span> &#123;<br>     <span class="hljs-comment">/*设置渐变形状为圆*/</span><br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(circle, red, blue);<br>&#125;<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">box1的效果</th>
<th align="center">box2的效果</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/61014a695132923bf8563bd5.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210728114717148" style="zoom:50%;" /></td>
<td align="center"><img src="https://pic.imgdb.cn/item/61014a795132923bf85678ef.png" srcset="/blog/img/loading.gif" lazyload style="zoom:50%;" /></td>
</tr>
</tbody></table>
<h4 id="5-2-2径向渐变的起点位置"><a href="#5-2-2径向渐变的起点位置" class="headerlink" title="5.2.2径向渐变的起点位置"></a>5.2.2径向渐变的起点位置</h4><blockquote>
<p>径向渐变是由圆心向外部扩展渐变，这个时候圆心的位置默认是在这个盒子的正中间，我们可以设置这个圆心起始坐标位置 ，这样就相当于设置了渐变的起点</p>
</blockquote>
<p>eg：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box1</span> &#123;<br>     <span class="hljs-comment">/*可以设置圆心枚举坐标*/</span><br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(circle at right bottom,red, blue);<br>&#125;<br><span class="hljs-selector-class">.box2</span> &#123;<br>    <span class="hljs-comment">/*可以设置圆心的精确坐标*/</span><br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(circle at <span class="hljs-number">0px</span> <span class="hljs-number">400px</span>,red, blue);<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p><code>circle at right bottom</code>代表圆形径向渐变的坐标默认是在右下角</p>
<p><code>circle at 0px 400px</code>代表圆形径向的坐标在横坐标0px，纵坐标400px</p>
</blockquote>
<h4 id="5-2-3重复径向渐变"><a href="#5-2-3重复径向渐变" class="headerlink" title="5.2.3重复径向渐变"></a>5.2.3重复径向渐变</h4><blockquote>
<p>径向渐变与线性渐变是一样的，它也可以重复进行</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box1</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">radial-gradient</span>(red <span class="hljs-number">0%</span> <span class="hljs-number">10%</span>,blue <span class="hljs-number">10%</span> <span class="hljs-number">30%</span>);<br>&#125;<br><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">repeating-radial-gradient</span>(red <span class="hljs-number">0%</span> <span class="hljs-number">10%</span>,blue <span class="hljs-number">10%</span> <span class="hljs-number">30%</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="center">基本径向渐变</th>
<th align="center">重复径向渐变</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/61014a3b5132923bf855b290.png" srcset="/blog/img/loading.gif" lazyload style="zoom:33%;" /></td>
<td align="center"><img src="https://pic.imgdb.cn/item/61014a4a5132923bf855dd7a.png" srcset="/blog/img/loading.gif" lazyload style="zoom:33%;" /></td>
</tr>
</tbody></table>
<h3 id="5-3圆锥渐变"><a href="#5-3圆锥渐变" class="headerlink" title="5.3圆锥渐变"></a>5.3圆锥渐变</h3><blockquote>
<p>这是一个较新的属性，可能会有一定的兼容性</p>
</blockquote>
<p>圆锥渐变是沿着一个角度旋转的渐变，它使用<code>conic-gradient</code>属性值来实现</p>
<p>eg：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;<br>    <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">conic-gradient</span>(颜色<span class="hljs-number">1</span> [开始位置] [结束位置],颜色<span class="hljs-number">2</span> [开始位置] [结束位置]...)<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="5-3-1基本圆锥渐变"><a href="#5-3-1基本圆锥渐变" class="headerlink" title="5.3.1基本圆锥渐变"></a>5.3.1基本圆锥渐变</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;<br>    <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">conic-gradient</span>(red,blue,orange);<br>&#125;<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/610147695132923bf84d3026.png" srcset="/blog/img/loading.gif" lazyload style="zoom:33%;" />

<blockquote>
<p>在上面的图片当中，它是从0点钟的方向，顺时针在旋转进行渐变</p>
</blockquote>
<p>:tipping_hand_man:<strong>小技巧</strong>：如果一个圆锥渐变的<strong>起始颜色与最后的结束颜色相同</strong>，则会有意想不到的效果…..</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">conic-gradient</span>(red,blue,orange,red);<br>&#125;<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/610147ab5132923bf84def67.png" srcset="/blog/img/loading.gif" lazyload style="zoom:33%;" />

<p>当我们的开始颜色与结束的颜色相同的时候，这个时候这个圆锥渐变就<strong>不会有明确的分界线了</strong></p>
<p><strong>同时圆锥渐变颜色是可以设置起始位置与结束位置的</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box1</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">conic-gradient</span>(red <span class="hljs-number">0%</span> <span class="hljs-number">30%</span>,blue <span class="hljs-number">30%</span> <span class="hljs-number">65%</span>,orange <span class="hljs-number">65%</span> <span class="hljs-number">100%</span>);<br>    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/6101481a5132923bf84f3233.png" srcset="/blog/img/loading.gif" lazyload style="zoom:33%;" />

<h4 id="5-3-2重复圆锥渐变"><a href="#5-3-2重复圆锥渐变" class="headerlink" title="5.3.2重复圆锥渐变"></a>5.3.2重复圆锥渐变</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">repeating-conic-gradient</span>(white <span class="hljs-number">0%</span> <span class="hljs-number">25%</span>,black <span class="hljs-number">25%</span> <span class="hljs-number">50%</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/610148a45132923bf850cf25.png" srcset="/blog/img/loading.gif" lazyload style="zoom:33%;" />

<blockquote>
<p>在上面的渐变里面，我们已经设置了白色渐变25%，黑色渐变25%，剩下的50%因为是重复的圆锥渐变，会自动repeating</p>
</blockquote>
<p>同时，再修改背景尺寸的属性值 让背景自动平铺，即可实现下面的效果</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box2</span>&#123;<br>    <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">repeating-conic-gradient</span>(white <span class="hljs-number">0%</span> <span class="hljs-number">25%</span>,black <span class="hljs-number">25%</span> <span class="hljs-number">50%</span>);<br>    <span class="hljs-attribute">background-size</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span>;<br>    <span class="hljs-attribute">background-repeat</span>:repeat;<br>&#125;<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/610149035132923bf851ef33.png" srcset="/blog/img/loading.gif" lazyload style="zoom:50%;" />

<p>也可以实现细网格效果</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 方格背景 */</span><br>     <span class="hljs-selector-class">.square-bg</span>&#123;<br>         <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br>         <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br>         <span class="hljs-attribute">background-image</span>:<span class="hljs-built_in">repeating-conic-gradient</span>(black <span class="hljs-number">0%</span> <span class="hljs-number">24.5%</span>,green <span class="hljs-number">24.5%</span> <span class="hljs-number">25.1%</span>) ; <br>         <span class="hljs-attribute">background-size</span>: <span class="hljs-number">50px</span> <span class="hljs-number">50px</span>;<br>         <br>     &#125;<br></code></pre></td></tr></table></figure>

<img src="https://pic.imgdb.cn/item/610149e15132923bf8549d0a.jpg" srcset="/blog/img/loading.gif" lazyload style="zoom:50%;" />

<hr>
<h2 id="6-弹性盒子与弹性布局"><a href="#6-弹性盒子与弹性布局" class="headerlink" title="6.弹性盒子与弹性布局"></a>6.弹性盒子与弹性布局</h2><p><img src="https://pic.imgdb.cn/item/6102964a5132923bf83ff93b.png" srcset="/blog/img/loading.gif" lazyload alt="弹性盒子"></p>
<h3 id="6-1弹性盒子"><a href="#6-1弹性盒子" class="headerlink" title="6.1弹性盒子"></a>6.1弹性盒子</h3><h4 id="6-1-1弹性盒子的属性"><a href="#6-1-1弹性盒子的属性" class="headerlink" title="6.1.1弹性盒子的属性"></a>6.1.1弹性盒子的属性</h4><ol>
<li><p><code>display:flex</code>让当前的元素变成一个弹性盒子</p>
<blockquote>
<p>当一个元素一旦变成弹性盒子，内部就会多出2个方向，分别是<code>row/column</code>，并且内部会多出2根轴，分别是主轴与副轴，元素会沿着主轴的方向去排列。【默认情况下row是主轴】</p>
</blockquote>
</li>
<li><p><code>flex-direction</code>用于设置弹性盒子的弹性方向，也叫<strong>主轴方向</strong></p>
<ul>
<li><code>row</code>设置水平的横向为主轴【默认值】</li>
<li><code>column</code>设置垂直的竖向为主轴</li>
<li><code>row-reverse</code>沿着水平的横向主轴反转排列</li>
<li><code>column-reverse</code>设置垂直的竖向为主轴反转排列</li>
</ul>
</li>
<li><p><code>justify-content</code>设置内部元素在主轴的排列</p>
<ul>
<li><code>flex-start</code>弹性开始的方向的位置【默认值】</li>
<li><code>flex-end</code> 弹性结束的方向的位置</li>
<li><code>center</code>弹性居中的位置</li>
<li><code>space-between</code>等间距空间隔开（左右两边的盒子紧挨着边界）</li>
<li><code>space-around</code>等间距空间环绕 （中间盒子的间距可能会比较大）</li>
<li><code>space-evenly</code>空间平均 （每个盒子的间距一样）</li>
</ul>
<table>
<thead>
<tr>
<th align="center">space-between</th>
<th align="center">space-around</th>
<th align="center">space-evenly</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><img src="https://pic.imgdb.cn/item/610297615132923bf8430abd.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210729113728833" style="zoom:33%;" /></td>
<td align="center"><img src="https://pic.imgdb.cn/item/6102977f5132923bf8435f49.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210729113848879" style="zoom:33%;" /></td>
<td align="center"><img src="https://pic.imgdb.cn/item/610297ac5132923bf843e02d.png" srcset="/blog/img/loading.gif" lazyload alt="image-20210729114038360" style="zoom:33%;" /></td>
</tr>
</tbody></table>
</li>
<li><p><code>align-items</code>设置内部元素在副轴上面的排列</p>
<ul>
<li><code>flex-start</code>弹性开始的位置</li>
<li><code>flex-end</code>弹性结束的位置</li>
<li><code>center</code>弹性居中的位置</li>
<li><code>stretch</code>在副轴方向伸展开来<strong>【默认值】</strong></li>
<li><code>baseline</code>基线对齐</li>
</ul>
</li>
<li><p><code>flex-wrap</code>用于设置弹性盒子的主轴是否换行</p>
<ul>
<li><code>nowrap</code>不换行<strong>【默认值】</strong></li>
<li><code>wrap</code>换行</li>
<li><code>wrap-reverse</code>换行以后再翻转副轴</li>
</ul>
</li>
<li><p><code>flex-flow</code>这一个属性是<code>flex-direction</code>与<code>flex-wrap</code>的结合属性</p>
</li>
<li><p><code>align-content</code>当弹性盒子的主轴换行以后就会出现<strong>多主轴</strong>的情况，这个属性就是设置多个主轴在副轴上面的排列</p>
<ul>
<li><code>flex-start</code>弹性开始的方向的位置<strong>【默认值】</strong></li>
<li><code>flex-end</code> 弹性结束的方向的位置</li>
<li><code>center</code>弹性居中的位置</li>
<li><code>space-between</code>等间距空间隔开</li>
<li><code>space-around</code>等间距空间环绕</li>
<li><code>space-evenly</code>空间平均</li>
</ul>
<blockquote>
<p><strong>经验之谈</strong>：当弹性盒子的主轴没有换行，我们就使用<code>align-items</code>，当弹性盒子主轴换行以后就使用<code>align-content</code></p>
</blockquote>
<p><span style="color:red;text-decoration:underline wavy blue">上面的7个属性值都是设置在弹性盒子的自身</span></p>
<ol start="8">
<li><code>order</code>设置弹性盒子内部的元素在主轴上面的排序，默认值是0，<strong>值越大就越靠后</strong>；如果值相同，则按照 HTML的结构顺序排列</li>
<li><code>align-self</code>弹性盒子的子元素上面单独设置自己的副轴排列<ul>
<li><code>flex-start</code>弹性开始的位置</li>
<li><code>flex-end</code>弹性结束的位置</li>
<li><code>center</code>弹性居中的位置</li>
<li><code>stretch</code>在副轴方向伸展开来【默认值】</li>
<li><code>baseline</code>基线对齐</li>
</ul>
</li>
<li><code>flex</code>弹性盒子里面的子元素占剩下空间的伸缩比例【主轴方向】，后期我们经常会使用这个属性进行弹性切割</li>
</ol>
<p><img src="https://pic.imgdb.cn/item/61029a485132923bf84b2bba.png" srcset="/blog/img/loading.gif" lazyload></p>
</li>
</ol>
<h4 id="6-1-2弹性盒子的影响"><a href="#6-1-2弹性盒子的影响" class="headerlink" title="6.1.2弹性盒子的影响"></a>6.1.2弹性盒子的影响</h4><p>弹性盒子不是普通盒子，当一个元素变成弹性盒子以后，内部肯定会有一些变化与影响</p>
<p><strong>对自身的影响</strong></p>
<ol>
<li>一个盒子变成弹性盒子以后内部就有主轴与副轴，有<code>row/column</code>的方向</li>
<li>弹性盒子的<code>overflow</code>在主轴上面是无效的，如果空间不够会压缩内部元素的布局空间，<u><strong>如果内部元素有内容不能压了，则还是会出现滚动条</strong></u></li>
<li><strong>弹性盒子自身是BFC</strong></li>
</ol>
<p><strong>对子级元素的影响</strong></p>
<ol>
<li><p>弹性盒子内部的子元素主轴的大小会缩，副轴的大小会拉，但是仍然可以通过<code>width/height</code>去设置</p>
</li>
<li><p>弹性盒子内部的子元素无视元素类型，默认都会变成<code>block</code>块级元素</p>
</li>
<li><p><u>弹性盒子内部的元素不能再使用浮动<code>float</code>，但是可以使用定位<code>position</code></u></p>
<blockquote>
<ul>
<li>当flex碰撞了position的时候，默认情况下，position还是要遵守flex的弹性布局规范</li>
<li>如果position定位脱流的元素使用了<code>left/right/top/bottom</code>则按定位的位置来算</li>
</ul>
</blockquote>
</li>
<li><p>弹性盒子内部的子元素仍然可以在主轴上面通过<code>flex</code>拉开</p>
</li>
</ol>
<h4 id="6-1-3弹性切割"><a href="#6-1-3弹性切割" class="headerlink" title="6.1.3弹性切割"></a>6.1.3弹性切割</h4><ol>
<li>手机端上中下布局，上下定高度 中间内容自动<code>flex:1;</code></li>
<li>使用<code>flex:1</code>拉开的区域，最好还是添加一个<code>overflow:auto</code>，区域内滚动</li>
</ol>
<h3 id="6-2弹性盒子在移动端的应用"><a href="#6-2弹性盒子在移动端的应用" class="headerlink" title="6.2弹性盒子在移动端的应用"></a>6.2弹性盒子在移动端的应用</h3><p>弹性盒子主要所衍生出的技术点是弹性布局，而弹性布局又多用于移动端的布局，所以我们要将弹性布局与移动端结合</p>
<p>在移动端做布局的时候，移动端网页有一个最重要一点，就是当前网页的大小应该是与设备的大小相同</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width,minimum-scale=1.0,maxnum-scale=1.0,user-scalable=no&quot;</span> /&gt;</span><br></code></pre></td></tr></table></figure>

<ol>
<li><code>viewport</code>代表视口</li>
<li><code>width=device-width</code>当前视口的宽度等于设备的宽度。也就是网页的宽度等于设备的宽度</li>
<li><code>minimum-scale=1.0</code>最小缩放值</li>
<li><code>maxnum-scale=1.0</code>最大缩放值</li>
<li><code>user-scalable=no</code>禁止用户缩放</li>
</ol>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/HTML/">HTML</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/CSS/">CSS</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/09/12/JavaScript%E7%AC%94%E8%AE%B0-1/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript笔记-1</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/09/05/CSS%E7%AC%94%E8%AE%B0-2/">
                        <span class="hidden-mobile">CSS笔记-2</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
